<template>
  <div class="all">
    <header>
      <div class="div" @click="back()">
        <img src="../../../assets/返回.png" alt="">
        <span class="solt">返回</span>
      </div>
      <div class="div">
        <span>门诊就诊记录</span>
      </div>
      <div class="div" @click="add">
        <img src="../../../assets/蓝添加.png" v-show="isEdit !== 0" alt="">
        <span style="background: none;border: none" class="solt" v-show="isEdit !== 0" >新增</span>
      </div>
    </header>
    <div class="content">
      <div class="title">
        <a class="hengGang"></a>
        <span>个人基本信息</span>
      </div>
      <div class="personInfo">
        <ul>
          <!--          <li class="personHeader">接受评估人基本信息</li>-->
          <li>
            <p>
              <img class="photo" v-if="peopleList.PHOTO === null || peopleList.PHOTO === '' || peopleList.PHOTO === undefined"
                   src="../../../assets/photo.png" alt="">
              <img v-else :src="peopleList.PHOTO" alt="">
              <a style="font-weight: bold">{{peopleList.name}}</a>
              <a v-show="Number(peopleList.sex) === 1">男</a>
              <a v-show="Number(peopleList.sex)=== 2">女</a>
              <a v-show="peopleList.age!==null && peopleList.age > 0">{{peopleList.age}}岁</a>
            </p>
            <p>
              <span class="color">联系电话：
                <span>
                  {{peopleList.phone}}
                </span>
              </span>
            </p>
<!--            <p>-->
<!--              <span class="color">初步诊断：-->
<!--                 <span v-if="peopleList.DIAGNOSE === '' || peopleList.DIAGNOSE === null || peopleList.DIAGNOSE === undefined">-->
<!--                  未填写-->
<!--                </span>-->
<!--                <span v-else>{{peopleList.DIAGNOSE}}</span>-->
<!--              </span>-->
<!--            </p>-->
            <p>
              <span class="color">联系地址：
                <span>
                  {{peopleList.zuizhongAddress}}
                </span>
              </span>
            </p>
          </li>
        </ul>
      </div>
      <div class="title">
        <a class="hengGang"></a>
        <span>门诊就诊记录信息</span>
      </div>
      <van-empty
        v-show="listArr.length === 0"
        class="custom-image"
        description="暂无数据"
        :image="require('../../../assets/暂无数据.png')"
      >
      </van-empty>
      <div class="divList" v-for="(item, index) in listArr" :key="index">
        <div class="div_left">
          <li>
            <img style="width: 18px;height: 18px;" src="../../../assets/保险编号.png" alt="">
          </li>
        </div>
        <ul class="ulList"
            @click="LookHis(item)"
        >
          <!--<li class="li_header" style="justify-content: space-between">
            <div style="display: flex;align-items: center;">
              <img class="photo" v-if="item.PHOTO === null || item.PHOTO === '' || item.PHOTO === undefined" src="../../assets/男患者@2x.png" alt="">
              <img class="photo" :src="item.PHOTO" v-else alt="">
              <a>{{item.NICK_NAME}}</a>
              <a v-show="Number(item.SEX) === 1">男</a>
              <a v-show="Number(item.SEX) === 2">女</a>
              <a>{{item.age}}岁</a>
            </div>
           <div @click.stop="deleteList(item, index)">
             <a
               style="width:50px;
                      height: 22px;
                      display:flex;
                      align-items:center;
                      justify-content: center;
                      color: #1da4f2 !important;
                      font-size: 13px !important;
                      border-radius: 3px;
                      background: rgba(29, 164, 242, 0.1)"
             >删除</a>
  &lt;!&ndash;           <img src="../../assets/垃圾桶@2x.png" alt="">&ndash;&gt;
           </div>
          </li>-->
          <li >
            <span>门诊号码：</span>
            <span>{{item.mzhm}}</span>
          </li>
          <li >
            <span>门诊诊断：</span>
            <span style="width: 70%;display: block;white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">{{item.zhenduan}}</span>
          </li>
          <li >
            <span>就诊机构：</span>
            <span style="width: 70%;display: block;white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;">
            {{item.jigou}}</span>
          </li>
          <li >
            <span>就诊科室：</span>
            <span>{{item.keshi}}</span>
          </li>
          <li >
            <span>就诊医生：</span>
            <span>{{item.yisheng}}</span>
          </li>
          <li >
            <span>就诊日期：</span>
            <span>{{item.riqi}}</span>
          </li>
          <li class="liBtn" v-show="isEdit !== 0 && item.hour !== 0">
            <button @click.stop="update(item, index)">修改</button>
            <button class="delete" @click.stop="deleteList(item, index)">删除</button>
          </li>
        </ul>
<!--        <div class="div_right"  v-show="isEdit !== 0">-->
<!--          <li >-->
<!--            <a @click.stop="deleteList(item, index)"-->
<!--              style=""-->
<!--            >删除</a>-->
<!--          </li>-->
<!--        </div>-->
      </div>
    </div>
    <van-dialog v-model="delshow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确定删除本条记录吗？"
                @confirm="delConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: 'MenZhenHistory',
  data () {
    return {
      // 操作人id
      op_user_id: this.$route.query.myUserid,
      // 档案人id
      data_user_id: this.$route.query.userid,
      listArr: [],
      peopleList: [],
      delshow: false,
      delIndex: 0,
      time: this.$route.query.time,
      isEdit: Number(this.$route.query.isEdit)
    }
  },
  mounted () {
    this.getList()
    // 获取个人基本信息
    this.getPerson()
  },
  methods: {
    // 删除确认
    delConfirm () {
      this.delList()
    },
    delList () {
      this.$http.deleteMedicalById({id: this.ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.listArr.splice(this.delIndex, 1)
            Toast('删除成功')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    update (item, index) {
      this.$router.push({path: '/addMenzhen',
        query: {
          // 操作人id
          op_user_id: this.$route.query.myUserid,
          // 档案人id
          data_user_id: this.$route.query.userid,
          id: item.id
        }})
    },
    // 点击删除
    deleteList (item, index) {
      this.ID = item.id
      this.delshow = true
      this.delIndex = index
    },
    // 获取个人基本信息
    getPerson () {
      this.$http.findUserXinXiTuoMin({'data_user_id': this.$route.query.userid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    LookHis (item) {
      this.$router.push({path: '/addMenzhen',
        query: {
        // 操作人id
          op_user_id: this.$route.query.myUserid,
          // 档案人id
          data_user_id: this.$route.query.userid,
          id: item.id,
          isEdit: 0
        }})
    },
    // 获取历史列表
    getList () {
      if (this.time !== undefined && this.time !== null && this.time !== '') {
      } else {
        this.time = ''
      }
      this.$http.findAllMedical({data_user_id: this.data_user_id, startTime: this.time, endTime: this.time})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.listArr = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    add () {
      this.$router.push({path: '/addMenzhen',
        query: {
        // 操作人id
          op_user_id: this.$route.query.myUserid,
          // 档案人id
          data_user_id: this.$route.query.userid
        }})
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100vw;
    height: 100%;
    background: #FAF9FE;
    overflow: auto;
  }
  header {
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    color: #333;
    background: white;
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid #E5E5E5;
  }
  .solt{
    color: #1DA4F2;
  }
  header .div {
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }

  header .div:nth-child(2) {
    justify-content: center;
  }
  .div:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .div:nth-child(3) img{
    width: 13px;
    height: 13px;
    margin-right: 3px;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  /*header div img {*/
  /*  width: 7px;*/
  /*  height: 13px;*/
  /*  margin-left: 15px;*/
  /*  margin-right: 5px;*/
  /*}*/
  .divList{
    width: 92%;
    border-radius: 10px;
    margin: 10px auto auto auto;
    background: white;
    padding: 5px 0px;
    box-sizing: border-box;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
    display: flex;
  }
  .divList:last-child{
    margin-bottom: 30px;
  }
  .div_left{
    width: 10%;
    /*background: #F9D739;*/
  }
  .div_right{
    width: 15%;
  }
  .div_left li,
  .div_right li{
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
  }
  .div_right a{
    width:35px;
    height: 18px;
    display:flex;
    align-items:center;
    justify-content: center;
    color: #1da4f2 !important;
    border-radius: 3px;
    background: rgba(29, 164, 242, 0.1);
    margin-right:  5px;
    padding: 3px;
    box-sizing: border-box;
  }
  .div_left button{
    width:25px;
    height: 18px !important;
    color: white !important;
    background: #1DA4F2  !important;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
  }
  .ulList{
    width: 85%;
  }

  .ulList li{
    height: 25px;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    display: flex;
    align-items: center;
  }
  .liBtn{
    height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .liBtn button{
    width: 60px;
    height: 29px;
    font-size: 15px;
    border-radius: 4px;
    color: #1DA4F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    background: transparent;
    border: 1px solid #1DA4F2;
  }
  .delete{
    background: transparent !important;
    border: 1px solid #E5E5E5 !important;
    color: #333!important;
  }
  .photo{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
  .li_header{
    height: 44px !important;
    display: flex;
    align-items: center;
  }
  .li_header a{
    margin-left: 10px;
    font-size: 15px !important;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333 !important;
  }
  .li_header button{
    color: white !important;
    background: #1DA4F2  !important;
    border-radius: 2px;
    font-size: 11px !important;
    padding: 3px 5px;
    box-sizing: border-box;
    margin-left: 10px;
    border: none;
  }
  /deep/ .van-empty__image {
    width: 160px;
    height: 100px;
  }

  /deep/ .van-empty__image img {
    width: 160px;
    height: 100px;
  }
  /deep/ .van-empty{
    width: 100%;
    height: 50vh !important;
  }
  .title{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    background: #ffffff;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin: 0 8px 0 15px;
  }
  .personInfo {
    width: 92%;
    /*background: #FFFFFF;*/
    margin: 10px auto;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    color: white;
  }
  .personInfo ul{
    width: 100%;
    height: 100%;
    /*padding: 5px 0;*/
    box-sizing: border-box;
    font-family: "PingFang SC";
  }
  .color{
    color: #fff;
    display: flex;
  }
  .personInfo img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
  .personHeader{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: #1DA4F2;
    color: #FFFFFF;
    font-size: 15px;
  }
  .personInfo ul li{
    width: 100% !important;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .personInfo p{
    width: 100%;
    padding: 5px 0 0 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
  .personInfo p:last-child{
    margin-bottom: 5px;
  }
  .personInfo p:first-child{
    margin-top: 3px;
  }
  .personInfo p a{
    margin-left: 10px;
    font-size: 15px;
  }
</style>
